<template>
  <div class="orederList" v-loading.fullscreen.lock="fullscreenLoading">
    <header>
      <div class="container">
        <div class="logo">
          <router-link to="/index">
            <img src="../../public/images/logo.jpg" alt="" />
            <span>商城</span>
          </router-link>
        </div>
        <div class="user">
          <i class="el-icon-user"></i>
          我的账户
        </div>
      </div>
    </header>
    <main>
      <div class="title">订单列表</div>
      <div class="orderList-container">
        <div
          class="order-item-container"
          v-for="item in orderList"
          :key="item.id"
        >
          <div class="item-head">
            <div class="item-head-left">
              订单号：{{ item.order_id }}&emsp;{{
                item.createdDate
              }}&nbsp;&nbsp;{{ item.createdTime }}
            </div>
            <div class="item-head-right">
              共计{{ item.goodsSum }}件商品 &emsp;合计：<span
                >￥{{ item.total_price }}</span
              >
            </div>
          </div>
          <div class="item-body">
            <div class="item-body-left">
              <div
                class="item-body-left-item"
                v-for="item in item.goods_info"
                :key="item.id"
              >
                <div class="item-body-img">
                  <img :src="item.s_goods_photos[0].path" alt="" />
                </div>
                <p>{{ item.goods_name }}</p>
              </div>
            </div>
            <div class="item-body-right">
              <button @click="showOrderItemDetail(item.id)">订单详情</button>
              <button>立即支付</button>
            </div>
          </div>
        </div>
        <!-- 分页器 -->
        <div class="fenye">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="2"
            @current-change="handleChange"
          ></el-pagination>
        </div>
      </div>
    </main>
    <page-footer></page-footer>
  </div>
</template>

<script>
import pageFooter from "../components/homeComponent/pageFooter.vue";
import { getOrderListgRequest } from "@/assets/tool/request.js";
export default {
  data() {
    return {
      orderList: "", //订单列表变量
      total: 0,
      page: 1,
      fullscreenLoading: true,
      orderItem: "", //单个订单信息
      isShow: false, //控制弹窗显示
    };
  },
  components: {
    pageFooter: pageFooter,
  },
  methods: {
    // 处理点击换
    handleChange(val) {
      this.page = val;
      this.getOrderList();
    },

    //获取商品列表和添加时间
    async getOrderList() {
      //获取订单列表
      let res = await getOrderListgRequest({ page: this.page, limit: 2 });
      this.total = res.data.result.count; //将多少订单给到分页总数
      this.orderList = res.data.result.rows;
      this.orderList.forEach(function (ele) {
        ele.goods_info = JSON.parse(ele.goods_info);
        let createdDate = ele.createdAt.slice(0, 10);
        let createdTime = ele.createdAt.slice(11, 19);
        let goodsSum = ele.goods_info.reduce(function (sum, ele) {
          return sum + ele.num;
        }, 0);
        //给请求数据添加数量时间
        ele.goodsSum = goodsSum;
        ele.createdDate = createdDate;
        ele.createdTime = createdTime;
      });
    },

    showOrderItemDetail(id){
      this.$router.push(`/singleorder/${id}`)
    }
  },

  created() {
    this.getOrderList();
    this.fullscreenLoading = false;
  },
};
</script>

<style lang="scss" scoped>
.orederList {
  min-height: 100vh;
  background-color: #eee;
}

//  头部样式
header {
  background-color: #fff;
  .container {
    width: 1200px;
    height: 50px;
    display: flex;
    margin: 0 auto;
    justify-content: space-between;
    align-items: center;
    .logo {
      img {
        height: 50px;
      }
      span {
        font-size: 18px;
        color: #000;
      }
    }
  }
}

// 列表样式
main {
  width: 1200px;
  margin: 0 auto;
  margin-top: 50px;
  background-color: #fff;
  .title {
    font-size: 30px;
    // height: 40px;
    line-height: 60px;
    text-align: center;
  }
  .orderList-container {
    padding: 50px;
    .order-item-container {
      margin-bottom: 50px;
      .item-head {
        padding: 15px 30px;
        border: 1px #ccc solid;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;
        color: #999;
        span {
          font-size: 20px;
          color: #000;
          font-weight: 500;
        }
      }
      .item-body {
        padding: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: 1px #ccc solid;
        .item-body-left {
          display: flex;
          align-items: center;
          .item-body-left-item {
            height: 100px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            margin-left: 15px;
            .item-body-img {
              height: 80px;
              line-height: 80px;
              img {
                width: 80px;
              }
            }
          }
        }
        button {
          margin-left: 10px;
          width: 100px;
          height: 40px;
          background: transparent;
          border: 1px #ccc solid;
          border-radius: 5px;
          cursor: pointer;
          &:hover {
            color: #1890ff;
            border-color: #1890ff;
          }
        }
      }
    }
    .fenye {
      display: flex;
      justify-content: center;
    }
  }
}
</style>